<!--
 * @Descripttion:
 * @version: 0.0
 * @Author: JunyaoPan
 * @Date: 2021-07-05 19:41:35
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-07-09 11:14:47
-->
<template>
  <!-- 订单详情页 -->
  <div>
    <!-- 头部 -->
    <el-tabs type="border-card">
      <!-- 订单详情 -->
      <el-tab-pane label="订单详情">
        <el-form v-model="orderData" label-width="80px">
          <el-form-item label="ID">
            <el-input
              v-model="orderData.id"
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="name" style="width: 200px" disabled />
          </el-form-item>
          <el-form-item label="总价">
            <el-input
              v-model="orderData.total"
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-input
              v-model="orderData.status"
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              v-model="detail"
              type="textarea"
              style="width: 200px"
              disabled
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 顾客信息 -->
      <el-tab-pane label="顾客信息">
        <el-form v-model="customerData" label-width="80px">
          <el-avatar class="img" :size="90" :src="customerData.userFace" />
          <el-form-item label="ID">
            <el-input
              v-model="customerData.id"
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="customerData.username" style="width: 200px" disabled />
          </el-form-item>
          <el-form-item label="电话">
            <el-input
              v-model="customerData.telephone"
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="性别">
            <el-input
              v-model="customerData.gender"
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="余额">
            <el-input
              v-model="customerData.balance"
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="地址">
            <el-input
              v-model="address"
              type="textarea"
              style="width: 200px"
              disabled
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 员工信息 -->
      <el-tab-pane label="员工信息">
        <el-form v-model="employeeData" label-width="80px">
          <el-avatar class="img" :size="90" :src="employeeData.userFace" />
          <el-form-item label="ID">
            <el-input
              v-model="employeeData.id"
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="employeeData.username" style="width: 200px" disabled />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="employeeData.realname" style="width: 200px" disabled />
          </el-form-item>
          <el-form-item label="电话">
            <el-input
              v-model="employeeData.telephone"
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="性别">
            <el-input
              v-model="employeeData.gender"
              style="width: 200px"
              disabled
            />
          </el-form-item>
          <el-form-item label="余额">
            <el-input
              v-model="employeeData.balance"
              style="width: 200px"
              disabled
            />
          </el-form-item>

        </el-form>
      </el-tab-pane>
    </el-tabs>
    <!-- {{ orderData8 }} -->
  </div>
</template>
<script>
import { get } from '@/utils/request'
export default {
  data() {
    return {
      orderData: [],
      name: '',
      detail: '',
      customerData: [],
      addressList: [],
      address: [],
      employeeData: []
    }
  },
  computed: {},
  created() {
    this.getAllDetail()
  },
  mounted() {},
  methods: {
    async getAllDetail() {
      const data1 = {
        id: this.$route.query.id
      }
      const res = await get('/order/findById', data1)
      this.orderData = res.data
      console.log(this.orderData)
      this.name = this.orderData.orderLines[0].product.name
      this.detail = this.orderData.orderLines[0].product.description
      this.customerData = this.orderData.customer
      this.addressList = this.orderData.address
      this.address = this.addressList.province + this.addressList.city + this.addressList.area + this.addressList.address
      this.employeeData = this.orderData.employee
      console.log(this.orderData)
      console.log(this.employeeData)
    }
  }
}
</script>
<style scoped>
.img{
  margin-left: 130px;
  margin-bottom: 15px;
}
</style>
